import React from 'react';
import {connect} from 'react-redux';
import {compose} from 'redux';
import ReactWaterMark from 'react-watermark-component';

/**
 * 水印高阶组件
 * @param {Component} Component
 */
const WaterMark = Component => props => {
    const user = props;
    const options = {
        font: '18px Microsoft Yahei',
        fillStyle: '#888',
        chunkWidth: 400
    };

    return (
        <ReactWaterMark
            waterMarkText={user.displayName || ''}
            options={options}
        >
            <Component />
        </ReactWaterMark>
    );
};

const wrapper = compose(
    connect(s => s.user),
    WaterMark
);

export default wrapper;
